<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实时数据图表</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 800px; height: 600px;"></div>
<script>
    // 创建图表
    var chart = Highcharts.chart('container', {
        title: {
            text: '实时数据图表'
        },
        series: [{
            name: '商品品类统计',
            data: []
        }]
    });

    // 从后端获取实时数据并更新图表
    function updateChart() {
        // 这里假设通过 AJAX 向后端请求数据，后端处理来自 Kafka 的数据并返回给前端
        $.ajax({
            url: 'scala/sparkStream/SparkKafka',
            method: 'GET',
            success: function(data) {
                // 更新图表数据
                chart.series[0].setData(data);
            },
            error: function(error) {
                console.error('获取数据失败：', error);
            }
        });
    }

    // 定时更新图表
    setInterval(updateChart, 5000);
</script>
</body>
</html>